<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      .zhegai {
        width: 100%;
        height: 100%;
        background-color: rgba(229, 229, 229, 0.3);
        position: absolute;
        /* top: calc(50% - 100px);
            left: calc(50% - 200px); */
        display: flex;
        align-items: center;
        display: none;
        top: 0;
      }
      .tanchu {
        width: 250px;
        height: 130px;
        border: 1px solid #ff9e1d;
        text-align: center;
        align-items: center;
        /* margin: 0 auto; */
        left: 100px;
        top: 0;
        position: absolute;
      }
      .header {
        width: 250px;
        height: 30px;
        background-color: #ffcc00;
      }
      p {
        display: inline-block;
        float: right;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button>弹出层</button>
    <div class="zhegai">
      <div class="tanchu">
        <div class="header">
          <p>X</p>
        </div>
        内容
      </div>
    </div>
    <script src="jQuery.js"></script>
    <script>

function resetAlert(){
        var w = $(window).width();
        var h = $(window).height();
        var scrollLeft = $(document).scrollLeft();
        var scrollTop = $(document).scrollTop();
        var left = (w - $('.tanchu').outerWidth())/2 + scrollLeft;
        var top = (h - $('.tanchu').outerHeight())/2 + scrollTop;
        $('.tanchu').css({left:left, top:top});
        $('zhegai').width(w+scrollLeft).height(h+scrollTop);
    }

    $(window).scroll(function(){
        resetAlert();
    });
    $(window).resize(function(){
        resetAlert();
    });

      $("button").click(function() {
        resetAlert();
        $(".zhegai").show();

      });
      $(".tanchu").mousedown(function(ev) {
        
        var offsetX = ev.offsetX;
        var offsetY = ev.offsetY;

        $(document).mousemove(function(ev){
            var left = ev.pageX - offsetX;
            var top = ev.pageY - offsetY;
            var w = $(window).width();
            var h = $(window).height();
            var scrollLeft = $(document).scrollLeft();
            var scrollTop = $(document).scrollTop();
            var maxLeft = w - $('.tanchu').outerWidth() + scrollLeft;
            var maxTop = h - $('.tanchu').outerHeight() + scrollTop;
            left = left>maxLeft ? maxLeft : left;
            top = top>maxTop ? maxTop : top;
            left = left<scrollLeft ? scrollLeft : left;
            top = top<scrollTop ? scrollTop : top;


            $('.tanchu').css({left:left, top:top});
        });
      });
      $('.tanchu').mouseup(function(ev) {
        $(document).off('mousemove');
      });
    </script>
  </body>
</html>
